/**
 * Created by Dalyn on 2017/5/8.
 */
import React from "react";
import {hashHistory} from 'react-router';
import Relay from "react-relay";
import { Table, Button, Icon, Popconfirm, message } from 'antd';
import ReactKey from "../../../../util/ReactKey";
import MaterialBillMutation from '../mutation/MaterialBillMutation';
import SaveProMaterialDetail from '../mutation/SaveProMaterialDetailMutation';
import "../css/productionLicense_index.css";
import "../../css/productionManagement_common.css";
/*导出组件*/
export default class MaterialBill extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
          value:'',
          dataSource: [],
        };
        let Ids = [];
    }

    componentWillMount(){
      this.getMateriaBillList()
    }

    getMateriaBillList() {
      Relay.Store.commitUpdate(
          new MaterialBillMutation({
            pdId: this.props.pdId,
          }),
          {
              onFailure: () => {
                  message.error("网络请求失败")
              },
              onSuccess: (response) => {
                let errorCode = response.getProMaterialDetail.responseData.errorCode
                let value = response.getProMaterialDetail.responseData.value
                if (errorCode == 0) {
                  let proMaterialDetailModels = response.getProMaterialDetail.responseData.proMaterialDetailModels
                   this.setState({
                     dataSource: proMaterialDetailModels
                   })
                } else if(errorCode == 500){
                  message.error('服务器错误，请联系系统管理员')
                }
              }
          }
      );
    }



    render(){
      const { dataSource } = this.state;
      const columns = [{
        title: '物料名称',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        render:(text, record, index) =>{
          return record.name
        }
      },
      {
        title: '颜色',
        dataIndex: 'colour',
        key: 'colour',
        width: 100,
        render:(text, record, index) =>{
          return record.colour
        }

      },
      {
        title: '规格',
        dataIndex: 'specification',
        key: 'specification',
        width: 100,
        render:(text, record, index) =>{
          return record.specification
        }
      },
      {
        title: '数量',
        dataIndex: 'count',
        key: 'count',
        width: 100,
        render:(text, record, index) =>{
          return record.count
        }
      }, {
        title: '用量/件',
        dataIndex: 'dosage',
        key: 'dosage',
        width: 100,
        render:(text, record, index) =>{
          return record.dosage
        }
      },{
        title: '损耗量',
        dataIndex: 'consume',
        key: 'consume',
        width: 200,
        render:(text, record, index) =>{
          return record.consume
        }
      }, {
        title: '需要数量',
        dataIndex: 'needCount',
        key: 'needCount',
        width: 100,
        render:(text, record, index) =>{
          return record.needCount
        },
      }, {
        title: '单位',
        key: 'prickle',
        dataIndex: 'prickle',
        width: 100,
        render:(text, record, index) =>{
          return record.prickle
        }
      },
      {
        title: '用处与位置说明',
        key: 'part',
        dataIndex: 'part',
        width: 180,
        render:(text, record, index) =>{
          return record.part
        }
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        width: 200,
        render:(text, record, index) =>{
            return record.remark
        }
      }
    ];

        return (
            <div className="poduction_manage_tab_box" >
                <Table
                  columns={columns}
                  dataSource={dataSource}
                  bordered
                  className="order_table"
                  pagination={false}
                  scroll={{ x: 1195 }}
                />

            </div>
        )
    }
}
